import Taro, { redirectTo, setNavigationBarTitle, navigateTo, switchTab } from '@tarojs/taro'
import { View, Image, Text, Button, Input } from '@tarojs/components'
import { AtIcon, AtForm, AtButton, AtSteps, AtAccordion, AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui'
import React, { useState, useEffect } from 'react'

import api from '../../../utils/api'
import request from '../../../utils/request'
import { formatTime } from '../../../utils/formatTime'

import './step1.less'

function AuthSteps(props) {
  const { handleNext } = props
  useEffect(() => {
    fetchTaskList()
  }, [])
  const [statusItems, setStatusItems] = useState([
    { 'title': '实名认证', status: 'success' },
    { 'title': '上传身份证', status: 'success' },
    { 'title': '接受任务' },
    { 'title': '确认协议' }
  ])
  const [taskList, setTaskList] = useState([])
  const [currentStep, setCurrentStep] = useState(2)
  const [currentActive, setCurrentActive] = useState(-1)
  const [price, setPrice] = useState(0)
  const [isShow, setShow] = useState(false)

  const fetchTaskList = () => {
    request(api.taskList, 'GET', {
      page_size: 100
    }).then(res => {
      console.log(res.tasks)
      setTaskList(res.tasks)
      if (res.tasks.length === 0) {
        handleNext(3)
      } else if (res.tasks.length === 1) {
        setCurrentActive(0)
      }
    })
  }

  const handlePrice = (e) => {
    setPrice(e.detail.value)
  }
  const handleClick = (i) => {
    setCurrentActive(i)
  }

  const openDialog = (item) => {
    console.log(!!item)
    setShow(!!item)
  }
  const receiveTask = (item) => {
    request(api.receiveTask, 'POST', {
      task_id: item.id
    }).then(res => {
      Taro.showToast({
        title: '接受成功',
        icon: 'none'
      })
      handleNext(3)
    })
  }

  return (
    <View className='ca'>
      <View className='layout'>
        <View className='bg'></View>
        <View className='top'></View>
        <View className='cell-group group'>
          <View className="step">
            <AtSteps
              items={statusItems}
              current={currentStep}
            />
            {taskList.map((item, index) => {
              return <AtAccordion
                key={item.id}
                open={true}
                onClick={handleClick.bind(this, index)}
                title={item.company.title}
              >
                {item.company_task.map((task, idx) => {
                  return <AtAccordion
                    key={task.id}
                    open={currentActive === idx}
                    onClick={handleClick.bind(this, idx)}
                    title={task.title}
                  >
                  <View className="task">
                    <View className="price">结算方式: {task.settle_type == 1 ? '面议' : '计件' }</View>
                    <View className="desc">发布于 {task.created_at}</View>
                    <AtButton onClick={receiveTask.bind(this, task)}>接受任务</AtButton>
                  </View>
                  </AtAccordion>
                })}
              </AtAccordion>
            })}
          </View>
        </View>
      </View>
      {/* <AtModal isOpened={isShow}>
        <AtModalHeader>提示</AtModalHeader>
        <AtModalContent>
          <Input style={{ display: isShow ? 'block' : 'none'}} focus onInput={handlePrice} placeholder="请输入心理价位(面议时必填)"></Input>
        </AtModalContent>
        <AtModalAction> <Button onClick={openDialog.bind(this, false)}>取消</Button> <Button onClick={receiveTask}>确定</Button> </AtModalAction>
      </AtModal> */}
    </View>
  )
}

export default AuthSteps
